<template>
  <div id="dialog-mask" class="about-dialog" @click="(e) => close(e)">
    <div class="dialog-box">
      <div class="box-title">
        <span>关于</span>
        <i id="close-btn" class="el-icon-circle-close close-btn" @click="(e) => close(e)"></i>
      </div>

      <div class="box-body">
        <div class="body-item">
          <span>3dViewer三维模型查看</span>
          <span>当前版本：V0.1.0</span>
          <span>发布时间：2023.9.25</span>
          <span>更新内容：</span>
          <span>1、初始化</span>
          <span class="line-between">= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close(e) {
      const id = e.target.id;
      if (id && (id == 'dialog-mask' || id == 'close-btn')) {
        this.$emit('close');
      }
    }
  },

  mounted() {
    // document.querySelector('.about-dialog').addEventListener('click', (e) => {
    //   e.stopImmediatePropagation();
    //   e.stopPropagation();
    //   this.close();
    // });
  }
}
</script>

<style lang="less" scoped>
.about-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  .dialog-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 570px;
    height: 420px;
    padding: 20px 40px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #333333;
    box-shadow: #272727;
    .box-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
      color: #e4e4e4;
      .close-btn {
        font-size: 16px;
        font-size: 400;
        cursor: pointer;
      }
    }

    .box-body {
      width: 100%;
      height: calc(100% - 43px);
      overflow-y: auto;
      margin-top: 20px;
      border-radius: 5px;
      border: 1px solid #474747;
      .body-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 8px;
        margin-bottom: 20px;
        line-height: 20px;
        box-sizing: border-box;
        font-size: 14px;
        color: #e4e4e4;
        .line-between {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>